const path = require('path')  // node.js 的核心模块，专门用来处理路径问题
const HtmlWebpackPlugin = require('html-webpack-plugin')  // 自动生成html插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin")  // 提取css插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')  // 压缩css文件

module.exports = {
  // 模式
  mode: 'development',
  // 源码映射，方便调试错误
  devtool: "source-map",
  // 入口,相对路径
  entry: './src/main.js',
  // 输出
  output: {
    // 所有打包文件输出的目录，绝对路径
    // __dirname nodejs的变量，代表当前文件的文件夹目录
		path: path.resolve(__dirname, 'dist'),
    // 入口文件打包后的文件名
    filename: 'static/js/index.js',
    // 打包前将之前的打包文件清除
		clean: true
  },
  // 开发服务器,不会输出资源，在内存中编译打包的(相当于只是启动服务，没有输出打包文件)
  devServer: {
    host: "localhost", // 启动服务器域名
    port: "3000", // 启动服务器端口号
    open: true, // 是否自动打开浏览器
  },
  // 加载器
  module: {
    rules: [
      // loader 的配置
      {
        test: /\.css$/i,  // 正则匹配 .css 结尾的文件
        // loader 加载是从右到左或从上到下
        use: [
          //'style-loader', // 将js中的css通过创建style标签添加到html中
          MiniCssExtractPlugin.loader, // 提取css为单独文件
          'css-loader',  // 将css资源编译成common.js模块到js中
          // 安装postcss-loader，解决css兼容性问题
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
            }
          }
        ],
      },
      {
        test: /\.less$/i,  // 正则匹配 .css 结尾的文件
        // loader 加载是从右到左或从上到下
        use: [
          //'style-loader', // 将js中的css通过创建style标签添加到html中
          MiniCssExtractPlugin.loader, // 提取css为单独文件
          'css-loader',  // 将css资源编译成common.js模块到js中
          // 安装postcss-loader，解决css兼容性问题
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
            }
          },
          'less-loader' // 将less转化为css
        ],
      },
      {
        test: /\.scss$/i,  // 正则匹配 .css 结尾的文件
        // loader 加载是从右到左或从上到下
        use: [
          //'style-loader', // 将js中的css通过创建style标签添加到html中
          MiniCssExtractPlugin.loader, // 提取css为单独文件
          'css-loader',  // 将css资源编译成common.js模块到js中
          // 安装postcss-loader，解决css兼容性问题
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
								plugins: [
									'postcss-preset-env', // 能解决大多数样式兼容性问题
								],
							},
            }
          },
          'sass-loader' // 将scss转化为css
        ],
      },
      {
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset',
				parser: {
					dataUrlCondition: {
						// 小于60kb的图片转成base64
						// 缺点：增加图片体积，优点：减少请求次数
						maxSize: 10 * 1024, // 4kb
					},
				},
				generator: {
					// 输出图片名称，hash:10, hash值取前10位，ext为文件扩展名，query为携带的参数
					filename: 'static/images/[hash:10][ext][query]',
				},
			},
			{
				// 打包字体图标及其他资源，原封不动的输出
				test: /\.(ttf|woff2?|mp3|mp4)$/i,
				type: 'asset/resource',
				generator: {
					// 输出图片名称，hash:10, hash值取前10位
					filename: 'static/media/[hash:10][ext][query]',
				},
			},
      {
        test: /\.js$/,
        // exclude: /node_modules/,  // 排除node_modules文件
        include: path.resolve(__dirname, 'src'),	// 只处理src下的文件
        loader: 'babel-loader',
        // options: {
        //   presets: ['@babel/preset-env'],
        // },
      },
    ]
  },
  // 插件
  plugins: [
    // plugins 配置
    new HtmlWebpackPlugin({
      // 以 public/index.html 为模板创建文件
      // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
    // 提取css为单独文件
    new MiniCssExtractPlugin({
      filename: "static/css/main.css"
    }),
    // 压缩css文件
    new CssMinimizerPlugin()
  ],
}